<template>
  <div>
    <el-form-item label="所属区县:" label-width="83px">
      <el-select size="mini" v-model="areaId_" placeholder="选择" @change="clickOrgTree">
        <el-option
          v-for="(item, index) in orgTree"
          :key="index"
          :label="item.label"
          :value="item.id"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="所属医院:">
      <el-select size="mini" v-model="hospitalId" placeholder="选择" @change="clickOrgTreeC">
        <el-option
          v-for="(item, index) in orgTreeC"
          :key="index"
          :label="item.label"
          :value="item.id"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="所属部门:">
      <el-select size="mini" v-model="departId" placeholder="选择" @change="clickOrgTreeD">
        <el-option
          v-for="(item, index) in orgTreeCs"
          :key="index"
          :label="item.label"
          :value="item.id"
        />
      </el-select>
    </el-form-item>
    <br />
  </div>
</template>

<script>
import orgApi from "@/api/Org.js";
export default {
  props: {
    // 所属区县
    areaId: ,
    // 所属医院
    hospitalId: ,
    // 所属部门
    departId: 
  },
  data() {
    return {
      // 市县
      orgTree: [],
      // 医院
      orgTreeC: [],
      // 部门
      orgTreeCs: []
    };
  },

  computed: {
    areaId_: {
      get() {
        return this.areaId;
      },
      set(val) {
        //areaId 改变由父组件控制
        this.$emit("getAreaId", val);
      }
    },
    hospitalId_: {
      get() {
        return this.hospitalId;
      },
      set(val) {
        //hospitalId 改变由父组件控制
        this.$emit("getHospitalId", val);
      }
    },
    departId_: {
      get() {
        return this.departId;
      },
      set(val) {
        //departId 改变由父组件控制
        this.$emit("getDepartId", val);
      }
    },
  },

  mounted() {
    // 获取基础查询
    this.initOrgTree();
  },
  methods: {
    // 获取基础查询
    initOrgTree() {
      orgApi.allTree({}).then(response => {
        const res = response.data;
        this.orgTree = res.data;
      });
    },
    // 根据选择市县获取医院
    clickOrgTree(v) {
      this.orgTreeC = [];
      this.orgTreeCs = [];
      this.hospitalId = "";
      this.departId = "";
      this.orgTree.filter(res => {
        if (res.id == v) {
          this.orgTreeC = res.children;
          // this.$emit("getAreaId", this.areaId);
        }
      });
    },
    // 根据选择市县获取医院
    clickOrgTreeC(v) {
      this.orgTreeCs = [];
      this.departId = "";
      this.orgTreeC.filter(res => {
        if (res.id == v) {
          this.orgTreeCs = res.children;
          this.$emit("getHospitalId", this.hospitalId);
        }
      });
    },
    clickOrgTreeD(v) {
      this.$emit("getDepartId", this.departId);
    }
  }
};
</script>

<style></style>
